<template>
    <div style="margin-left:'20px'">
        <el-row>
            <!-- 按钮 -->
            <el-col :span="12">
                <el-button type="primary" @click="newincreased">新增</el-button>
                <!-- <el-button type="success" @click="Gaoji">高级搜索</el-button> -->
            </el-col>
            <!-- 搜索框 -->
            <el-col :span="12">
                <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="input"
                    @keydown.native="Gaoji"
                >
                </el-input>
            </el-col>
        </el-row>
        <!-- {{tableData}} -->
        <el-table height="470px" :data="tableData" border style="width: 100%">
            <el-table-column  type="index" label="#"  width="90"> </el-table-column>
            <el-table-column  prop="title" label="标题" width="90"></el-table-column>
            <el-table-column  prop="type"  label="分类" width="90"> </el-table-column>
            <el-table-column  prop="author" label="作者" width="90"> </el-table-column>
            <el-table-column  prop="time"  label="用时"  width="90"> </el-table-column>
            <el-table-column  prop="date"  label="发布时间"  width="200"> </el-table-column>
            <el-table-column  prop="content"  label="Mout"  width="300"> </el-table-column>
            <el-table-column  fixed="right" label="操作" width="130">
                <template slot-scope="scope">
                    <el-button @click="ModifyClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="PageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totle">
        </el-pagination>

        <el-drawer 
            width:300
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false">
            <Msbdform :checktest="checktest" :newincreased="newincreased" />
        </el-drawer>
    </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from "vuex";
import Msbdform from "./Msbdform";
export default {
  layout: "main",
  data() {
    return {
      input: "",
      drawer: false,
      checktest: {}
    };
  },
  mounted() {
    this.Getapply();
    this.totleget();
  },
  methods: {
    ...mapActions("msbd", ["Getapply", "deleteapi", "totleget", "uidapi"]),
    ...mapMutations("msbd", ["currentPagelist", "PageSizelist"]),
    newincreased() {
      this.drawer = !this.drawer;
      this.uidapi();
    },
    getlisthost() {
      this.drawer = !this.drawer;
    },
    detailsClick() {},
    ModifyClick(val) {
      console.log(val);
      this.checktest = val;
      this.newincreased();
    },
    deleteClick(val) {
      this.deleteapi(val);
      this.Getapply();
    },
    handleCurrentChange(val) {
      this.$store.commit("msbd/currentPagelist", val);
      this.Getapply();
    },
    handleSizeChange(val) {
      this.$store.commit("msbd/PageSizelist", val);
      this.Getapply();
    },

    Gaoji() {
      this.$store.commit("msbd/inputlist", this.input);
      this.Getapply(this.input);
    }
  },
  computed: {
    ...mapState("msbd", ["tableData", "totle", "PageSize", "currentPage"])
  },
  components: {
    Msbdform
  }
};
</script>

<style scoped>
.el-input {
  width: 350px;
}

.el-input .el-input__inner {
  width: 350px;
}

.el-button {
  margin-left: 10px;
}
</style>